<template>
	<div class="UserSpacePage">
		<div class="data-panel">
			<div class="user-info-panel">
				<div class="user-header-panel" v-bind:style="{'background-image':'url(' + user.bgUrl + ')'}">
					<HeadIcon :icon="user.icon" :letter="user.letter" :width="80" :height="80">
					</HeadIcon>
					<div style="margin-left: 10px;">
						<div>
							<span class="user-name" v-text="user.name">
							</span>
							<img class="user-gender" :src="gender.male">
							<span class="user-age" v-text="user.age + '岁'">
							</span>
						</div>
						<CAttributeTags :data="user.atags">
						</CAttributeTags>
						<p class="user-follow">
							<span>关注</span>
							<span v-text="user.followCount"></span>
							<span>|</span>
							<span>粉丝</span>
							<span v-text="user.fansCount"></span>
						</p>
					</div>
				</div>

			</div>

			<div class="user-tabs-panel">
				<Tabs value="userInfo" @on-click="changeTabs">
					<Tab-pane label="个人资料" name="userInfo">
						<div class="user-d-panel">
							<div class="user-d-item">
								<span class="user-d-key">姓名</span>
								<p class="user-d-value" v-text="user.name"></p>
							</div>
							<div class="user-d-item">
								<span class="user-d-key">曾用名</span>
								<p class="user-d-value" v-text="user.useNames == null || user.useNames == ''? '无': JSON.parse(user.useNames).join(' ')">
								</p>
							</div>
							<div class="user-d-item">
								<span class="user-d-key">出生日期</span>
								<p class="user-d-value" v-text="user.birthday"></p>
							</div>
							<div class="user-d-item">
								<span class="user-d-key">入行年份</span>
								<p class="user-d-value" v-text="user.workYear == null?'无':user.workYear.substring(0, 4) + '年'"></p>
							</div>
							<div class="user-d-item">
								<span class="user-d-key">外语能力</span>
								<p class="user-d-value" v-text="user.name"></p>
							</div>
							<div class="user-d-item">
								<span class="user-d-key">常住地</span>
								<p class="user-d-value" v-text="user.permanentArea == null || user.permanentArea == ''? '未设置' : JSON.parse(user.permanentArea).join(' ')"></p>
							</div>
							<div class="user-d-item">
								<span class="user-d-key">护照有效期</span>
								<p class="user-d-value" v-text="user.passportDate"></p>
							</div>
							<div class="user-d-item">
								<span class="user-d-key">身高</span>
								<p class="user-d-value" v-text="user.height + 'cm'"></p>
							</div>
							<div class="user-d-item">
								<span class="user-d-key">体重</span>
								<p class="user-d-value" v-text="user.weight + 'kg'"></p>
							</div>
							<div class="user-d-item">
								<span class="user-d-key">民族</span>
								<p class="user-d-value" v-text="user.nation"></p>
							</div>
						</div>
					</Tab-pane>
					<Tab-pane label="作品" name="works">
						<div class="works-panel">
							<div class="works-item" v-for="(item, index) in filterWorkList">
								<CWorksItem2User :data="item">
									{{item}}
								</CWorksItem2User>
							</div>
							<div style="text-align: center;">
								<p class="more" :class="isDisplay == true? 'displayNone' : ''" @click="moreClick('works')">点击加载更多</p>
							</div>
						</div>
					</Tab-pane>
					<Tab-pane label="关注" name="follows">
						<div class="follow-panel">
							<div class="follow-item" v-for="(item, index) in filterFollowsList">
								<CUserItem :data="item">
								</CUserItem>
							</div>
							<div style="text-align: center;">
								<p class="more" :class="isDisplay == true? 'displayNone' : ''" @click="moreClick('follows')">点击加载更多</p>
							</div>
						</div>

					</Tab-pane>
					<Tab-pane label="粉丝" name="fans">
						<div class="fan-panel">
							<div class="fan-item" v-for="(item, index) in filterFansList">
								<CUserItem :data="item">
								</CUserItem>
							</div>
							<div style="text-align: center;">
								<p class="more" :class="isDisplay == true? 'displayNone' : ''" @click="moreClick('fans')">点击加载更多</p>
							</div>
						</div>
					</Tab-pane>
					<Tab-pane label="好友" name="friends">档期</Tab-pane>
					<Tab-pane label="合作影人" name="cooperation">档期</Tab-pane>
					<Tab-pane label="工作邀约" name="invitation">档期</Tab-pane>
					<Tab-pane label="被邀约" name="offer">档期</Tab-pane>
					<Tab-pane label="功能授权" name="funciton">档期</Tab-pane>
					<Tab-pane label="隐私设置" name="privacy">档期</Tab-pane>
					<Tab-pane label="屏蔽名单" name="shield">档期</Tab-pane>
					<Tab-pane label="黑名单" name="blacklist">档期</Tab-pane>
					<Tab-pane label="档期" name="schedule">档期</Tab-pane>
					<Tab-pane label="动态" name="trends">
						<div class="trend-panel">
							<div class="trend-item" v-for="(item, index) in trends">
								<CTrendItem :data="item">
								</CTrendItem>
							</div>
							<div style="text-align: center;">
							<p class="more" :class="isDisplay == true? 'displayNone' : ''" @click="moreClick('trend')">点击加载更多</p>
						</div>
						</div>
						
					</Tab-pane>
					<Tab-pane label="日记" name="diarys">日记</Tab-pane>
					<Tab-pane label="相册" name="albums">相册</Tab-pane>
				</Tabs>
			</div>

		</div>
	</div>
</template>

<script>
	import UserService from '@/services/UserService.js';
	import WorksService from '@/services/WorksService.js';
	import TrendService from '@/services/TrendService.js';
	import CUserItem from '@/components/CUserItem.vue';
	import HeadIcon from '@/components/HeadIcon.vue';
	import CAttributeTags from '@/components/CAttributeTags.vue';
	import CWorksItem2User from '@/components/CWorksItem2User.vue';
	import CTrendItem from '@/components/CTrendItem.vue';

	var $userService = UserService();
	var $worksService = WorksService();
	var $trendService = TrendService();

	const $data = {
		uid: null,
		gender: {
			male: './static/male_icon.png',
			female: './static/female_icon.png'
		},
		user: {},
		works: [],
		trends: [],
		diarys: [],
		follows: [],
		fans: [],
		tseachParams: {
			type: 1,
			page: 0,
			pagesize: 5
		},
		dsearchParams: {
			type: 1,
			page: 0,
			pagesize: 20
		},
		isTabPanelFixed: false,
		isDisplay: false,
		limitNum: 0
	};
	var getUserInfo = function(uid) {
		$userService.getUserInfo(uid)
			.then(function(response) {
				var res = response.data;
				var code = res.rescode;
				if(code == 100) {
					$data.user = res.data;
				}
			}, function(error) {
				console.log(error);
			});
	}
	var getWorks2User = function(uid) {
		$worksService.getWorks2User(uid)
			.then(function(response) {
				var res = response.data;
				var code = res.rescode;
				if(code == 100) {
					$data.works = res.data;
				}
			}, function(error) {
				console.log(error);
			});
	}
	var getTrends2User = function(uid, params) {
		$trendService.getTrends2User(uid, params)
			.then(function(response) {
				var res = response.data;
				var code = res.rescode;
				if(code == 100) {
					if($data.tseachParams.page == 0) {
						$data.trends = res.data;
					} else {
						$data.trends = $data.trends.concat(res.data);
					}
					if(res.data.length < 5) {
						document.querySelector('.more').style.display = 'none';
					}
				}
			}, function(error) {
				console.log(error);
			});
	}

	var getFollows = function(userId, page, pagesize) {
		$userService.getFollows(userId, page, pagesize)
			.then(function(response) {
				var res = response.data;
				var code = res.rescode;
				if(code == 100) {
					$data.follows = res.data;
				}
			}, function(error) {
				console.log(error);
			});
	}

	var getFans = function(userId, page, pagesize) {
		$userService.getFans(userId, page, pagesize)
			.then(function(response) {
				var res = response.data;
				var code = res.rescode;
				if(code == 100) {
					$data.fans = res.data;
				}
			}, function(error) {
				console.log(error);
			});
	}

	export default {
		name: 'UserSpacePage',
		data() {
			return $data;
		},
		watch: {
			'isTabPanelFixed': function(val, oldval) {
				if(val == true) {
					document.querySelector('.ivu-tabs-nav-scroll').style.position = 'fixed';
					document.querySelector('.ivu-tabs-nav-scroll').style.top = '60px';
					document.querySelector('.ivu-tabs-nav-scroll').style.zIndex = '9999';
					document.querySelector('.ivu-tabs-nav-scroll').style.backgroundColor = '#fff';
				} else {
					document.querySelector('.ivu-tabs-nav-scroll').style.position = '';
				}
			}
		},
		methods: {
			menu() {
				if(this.$parent.$refs.main.scrollTop > 300) {
					this.isTabPanelFixed = true;
				} else {
					this.isTabPanelFixed = false;
				}
			},
			moreClick(type) {
				if(type == 'trend') {
					$data.tseachParams.page = $data.tseachParams.page + 1;
					getTrends2User($data.uid, this.tseachParams);
				} else if(type == 'works') {
					this.limitNum += 5;
					if(this.limitNum >= $data.works.length) {
						this.isDisplay = true;
					}
				} else if(type == 'follows') {
					this.limitNum += 10;
					if(this.limitNum >= $data.follows.length) {
						this.isDisplay = true;
					}
				} else if (type == 'fans') {
					this.limitNum += 10;
					if(this.limitNum >= $data.fans.length) {
						this.isDisplay = true;
					}
				}
			},
			changeTabs(name) {
				if(name == 'trends') {
					this.isDisplay = false;
					$data.works = [];
					$data.tseachParams.page = 0;
					getTrends2User($data.uid, this.tseachParams);
				} else if(name == 'works') {
					this.limitNum = 5;
					getWorks2User($data.uid);
					$data.trends = [];
					if(this.limitNum >= $data.works.length) {
						this.isDisplay = true;
					} else {
						this.isDisplay = false;
					}
				} else if(name == 'follows') {
					this.limitNum = 20;
					$data.trends = [];
					$data.works = [];
					if(this.limitNum >= $data.follows.length) {
						this.isDisplay = true;
					} else {
						this.isDisplay = false;
					}
				} else if (name == 'fans') {
					this.limitNum = 20;
					$data.trends = [];
					$data.works = [];
					if(this.limitNum >= $data.follows.length) {
						this.isDisplay = true;
					} else {
						this.isDisplay = false;
					}
				} else if (name == 'userInfo') {
					$data.works = [];
				} else {
					$data.trends = [];
					$data.works = [];
				}
			}
		},
		components: {
			HeadIcon,
			CUserItem,
			CAttributeTags,
			CWorksItem2User,
			CTrendItem
		},
		created: function() {},
		mounted: function() {
			$data.uid = this.$route.query.uid;
			getUserInfo($data.uid);
//			getWorks2User($data.uid);
			//			getTrends2User($data.uid, this.tseachParams);
			getFans($data.uid, 0, 20);
			getFollows($data.uid, 0, 20);
			this.$parent.$refs.main.addEventListener('scroll', this.menu);
		},
		computed: {
			useNames() {
				return
			},
			filterWorkList: function() {
				return this.$data.works.slice(0, this.limitNum);
			},
			filterFollowsList: function() {
				return this.$data.follows.slice(0, this.limitNum);
			},
			filterFansList: function() {
				return this.$data.fans.slice(0, this.limitNum);
			}
		}
	}
</script>

<style>
	.UserSpacePage {
		background-color: #FFF;
		height: 100%;
	}
	
	.data-panel {
		height: 100%;
		width: 100%;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		flex-direction: column;
	}
	
	.user-info-panel {
		width: 100%;
	}
	
	.user-info-panel .user-header-panel {
		width: 100%;
		height: 250px;
		display: flex;
		background-size: cover;
		background-position: 50% 50%;
		display: -webkit-flex;
		display: -moz-flex;
		align-items: flex-end;
		padding: 15px;
	}
	
	.user-name {
		color: #FFF;
		font-size: 18px;
		font-weight: 300px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	
	.user-gender {
		width: 13px;
		height: 13px;
	}
	
	.user-age {
		color: #FFF;
		font-size: 15px;
		font-weight: 300px;
		margin-bottom: 5px;
	}
	
	.user-follow {
		color: #FFF;
		margin-top: 3px;
		font-size: 12px;
	}
	
	.user-d-item {
		padding: 10px 30px;
		border-bottom: 1px solid #EEE;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
	}
	
	.user-d-key {
		font-size: 15px;
		color: #000000;
		opacity: 0.54;
		width: 100px;
		text-align: left;
	}
	
	.user-d-value {
		font-size: 15px;
		color: #000000;
		opacity: 0.87;
	}
	
	.more {
		display: inline-block;
		padding: 10px 15px;
		border: 1px solid #ccc;
		color: rgba(0, 0, 0, 0.84);
		margin: 30px 0;
		border-radius: 5px;
		cursor: pointer;
		font-size: 15px;
	}
	
	.displayNone {
		display: none;
	}
	
	.more:hover {
		background-color: #eee;
	}
	
	.user-tabs-panel {}
	
	.works-panel {
		padding: 0px 20px 20px 20px;
		width: 100%;
	}
	
	.works-item {
		padding: 20px 0px;
		border-bottom: 1px solid #E1E7E9;
	}
	
	.trend-item {
		padding: 20px 20px;
		border-bottom: 1px solid #E1E7E9;
	}
	
	.user-tabs-panel div.ivu-tabs-nav-scroll {
		width: 1040px;
		overflow-x: scroll;
	}
	
	.user-tabs-panel div.ivu-tabs-nav-scroll::after {
		content: ">";
		position: absolute;
		font-size: 10px;
		right: 10px;
		top: 8px
	}
</style>